﻿$(function () {
    var registered = false;
    var messageSound = new Audio("Content/Sounds/newMessageSound.mp3");
    var userSound = new Audio("Content/Sounds/userInfoSound.mp3");

    $("#login").focus();

    var chatHub = $.connection.chatHub;

    chatHub.client.registered = function (users) {
        $('#register').hide();
        $('#app').show();
        $("#msg").focus();
        $('#userName').html($('#login').val());
        registered = true;
        displayUsers(users);
    };

    chatHub.client.newUserJoined = function (newUser, users) {
        if (registered) {
            var dateStr = getDate();
            $('#messages').append('<li><div class="top"><div class="user" style="color:green;">INFO</div><div class="date">' + dateStr + '</div></div><div class="message"><i>' + newUser.Name + '</i> has joined</div></li>');
            scrollMessages();
            displayUsers(users);
            if (newUser.Name != $('#login').val()) {
                userSound.play();
            }
        }
    };

    chatHub.client.userLoggedOut = function (user, users) {
        if (registered) {
            var dateStr = getDate();
            $('#messages').append('<li><div class="top"><div class="user" style="color:red;">INFO</div><div class="date">' + dateStr + '</div></div><div class="message"><i>' + user.Name + '</i> has left chat</div></li>');
            scrollMessages();
            displayUsers(users);
            userSound.play();
        }
    };

    chatHub.client.newMessage = function (msg) {
        if (registered) {
            var dateStr = getDate();
            var myMessageClass = " myMessage";
            if (msg.User.Name != $('#login').val()) {
                myMessageClass = "";
                messageSound.play();
            }
            $('#messages').append('<li><div class="top"><div class="user' + myMessageClass + '">' + msg.User.Name + '</div><div class="date">' + dateStr + '</div></div><div class="message">' + msg.Text + '</div></li>');
            scrollMessages();
        }
    };

    $.connection.hub.start().done(
        function () {
            $('#msg').keypress(function (e) { keyEnterAction(e, sendMessage); });
        });

    function displayUsers(users) {
        $('#otherUsers').html('');
        var currentUserLogin = $('#login').val();

        for (var i = 0; i < users.length; i++) {
            var user = users[i];
            if (user.Name != currentUserLogin) {
                $('#otherUsers').append('<li>' + user.Name + '</li>');
            }
        }
    }

    function scrollMessages() {
        $("#messagesBox").scrollTop($('#messages').height() + $('#messages li').last().height());
    }

    function register() {
        chatHub.server.register($('#login').val());
    }

    function sendMessage() {
        chatHub.server.sendMessage($('#login').val(), $('#msg').val());
        $('#msg').val('');
    }

    function keyEnterAction(e, action) {
        e = e || event;
        if (e.keyCode === 13 && !e.ctrlKey && !e.shiftKey) {
            action();
        }
    }

    function getDate() {
        return new Date().toLocaleString();
    }

    $('#registerBtn').click(register);
    $('#login').keypress(function (e) { keyEnterAction(e, register); });


    $('#application').css('margin-top', Math.round($(window).height() * 0.1) + 'px');
    $(window).resize(function (e) {
        var height = $(window).height();
        $('#application').css('margin-top', Math.round(height * 0.1) + 'px');
        scrollMessages();
    });
});